<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">折点图</div>
                    <!-- <div>详细说明</div> -->
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        var lineChartData = [
            {
                "xdata": ["FY19Q2", "FY19Q3", "FY19Q4", "FY20Q1", "FY20Q2", "FY20Q4", "FY21Q1"],
                "ydata": ["79.08", "77.7", "77.3", "76.9", "76.88", "77.54", "78.67"],
                "Categorys": "Resilience",
                "Respondents": ["2294", "3068", "3698", "4375", "4962", "5683", "5259"]
            },
            {
                "xdata": ["FY19Q2", "FY19Q3", "FY19Q4", "FY20Q1", "FY20Q2", "FY20Q4", "FY21Q1"],
                "ydata": ["81.55", "80.18", "82.02", "81.25", "80.68", "83.41", "83.8"],
                "Categorys": "Community Support",
                "Respondents": ["2482", "3878", "3841", "4583", "5225", "5903", "5464"]
            },
            {
                "xdata": ["FY19Q2", "FY19Q3", "FY19Q4", "FY20Q1", "FY20Q2", "FY20Q4", "FY21Q1"],
                "ydata": ["83.8", "82.68", "84.76", "84.14", "82.9", "88.36", "88.82"],
                "Categorys": "Professional Identity",
                "Respondents": ["2259", "3547", "3655", "4296", "4953", "5522", "5093"]
            }]

        let sers = [];
        let sersname = [];
        let symbol = [
            "circle",
            "diamond",
            "rect",
            "triangle",
            "circle",
            "diamond",
            "rect",
        ];

        for (var i = 0; i < lineChartData.length; i++) {
            var sersdata = [];
            var xdata = lineChartData[1].xdata;
            for (var j = 0; j < lineChartData[1].xdata.length; j++) {
                sersdata.push([
                    lineChartData[i].xdata[j],
                    lineChartData[i].ydata[j],
                    lineChartData[i].Respondents[j],
                ]);
            }
            sers.push({
                name: lineChartData[i].Categorys,
                type: "line",
                symbol: symbol[i],
                symbolSize: 6,
                connectNulls: true,
                data: sersdata, //lineChartData[i].ydata,
            });
            sersname.push(lineChartData[i].Categorys);
        }

        option = {
            tooltip: {
                trigger: "item",
                formatter: function (params) {
                    return (
                        "Quarter: " +
                        params.data[0] +
                        "<br>" +
                        params.seriesName +
                        ": " +
                        params.data[1] +
                        "<br>Respondents: " +
                        params.data[2]
                    );
                },
                backgroundColor: "#fff",
                borderRadius: 2,
                textStyle: {
                    fontFamily: "Graphik",
                    color: "#000",
                    fontSize: 12,
                },
            },
            color: [
                "#68885a",
                "#d1625b",
                "#866576",
                "#5c83d3",
                "#FCB04E",
                "#BEBA5F",
                "#e3bee6",
            ],
            legend: [
                {
                    icon: "rect",
                    itemWidth: 50,
                    itemHeight: 3,
                    // orient: "vertical",
                    right: 10,
                    top: 0,
                    bottom: 20,
                    data: sersname,
                },
            ],
            grid: {
                top: "18%",
                left: "3%",
                right: "6%",
                bottom: "4%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    data: xdata,
                },
            ],
            yAxis: [
                {
                    scale: true,
                    type: "value",
                },
            ],
            series: sers,
        };

        option && myChart.setOption(option);
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>